<template>
  <main>
    <el-card>
      <div class="flex">
        <div class="zhuanzhangbox" v-loading="payBoxLoading">
          <div class="title">
            <span class="active">提现</span>
          </div>
          <div class="m-t-20">
            <div class="flex">
              提现账号：
              <el-select :disabled="formData.disabled" v-model="formData.selectVal" 
                class="w100p flex1"
                placeholder="请选择提现账号"
              >
                <el-option v-for="item in formData.options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
            <div class="re m-t-12 flex">
              <el-input v-model.string="formData.authcode" class="w100p m-r-10" placeholder="请输入短信验证码"
                maxlength="6" />
              <el-button type="primary" @click="changePayCard" :disabled="formData.disabled" style="width: 140px">
                {{ formData.disabled ? codeCountDown : "发送验证码" }}
              </el-button>
            </div>
            <el-input v-model.string="formData.txnamount" class="w100p m-t-12" placeholder="请输入提现金额"
              @blur="validateMoney" />
            <el-input v-model.string="formData.remark" class="w100p m-t-12" :autosize="{ minRows: 3, maxRows: 4 }"
              type="textarea" placeholder="请说明提现原因" maxlength="30" show-word-limit />
            <el-button type="primary" class="block w100p m-t-12" @click="submit"
              :loading="formData.submitLoading">立即提现</el-button>
          </div>
        </div>
        <div class="datashow flex1" v-loading="pieLoading">
          <div class="f24">
            资产概览
            <el-text type="primary" class="pointer" @click="getPieData">
              <el-icon class="f22">
                <RefreshRight />
              </el-icon>
            </el-text>
          </div>
          <div class="o5 m-t-5">当前数据截止时间：{{ nowPieUpdateTime }}</div>
          <div class="echart" id="mychart"></div>
        </div>
      </div>
    </el-card>
    <el-card class="m-t-20" v-loading="tableStore.tableLoading">
      <div class="flex flex-jus-between m-b-15">
          <div class="title pointer" style="width: 350px;">
            <span :class="tableStore.detailType==1?'active':''" @click="changeType(1)">支出明细</span>
            <span :class="tableStore.detailType==2?'active':''" @click="changeType(2)">收入明细</span>
          </div>
        <div class="flex flex-column flex-item-end">
          <RouterLink to="/detail" v-if="tableStore.detailType==1">
            <el-text type="primary" class="f16 flex">
              支出查询
              <el-icon class="f22 m-l-5">
                <ArrowRight />
              </el-icon>
            </el-text>
          </RouterLink>
          <RouterLink to="/detailincome" v-else>
            <el-text type="primary" class="f16 flex">
              收入查询
              <el-icon class="f22 m-l-5">
                <ArrowRight />
              </el-icon>
            </el-text>
          </RouterLink>
          <div class="flex flex-jus-between m-t-5">
            <el-icon class="f18 pointer" style="color:var(--el-color-primary);" @click="getTableList()" title="刷新数据">
              <RefreshRight />
            </el-icon>
            <div class="o5 f14 m-l-5">当前数据截止时间：{{ tableStore.tableUpdateTime }}</div>
          </div>
        </div>
      </div>
      <Table 
        :select="false" 
        :tableHeight="tableHeight" 
        v-if="tableStore.detailType==1"
      />
      <TableIncome 
        :select="false" 
        :tableHeight="tableHeight" 
        v-else
      />
    </el-card>
  </main>
</template>

<script setup lang="ts">
document.title = "资金管理";

import { ref,onMounted } from "vue";
import { RouterLink } from "vue-router";
import { ElMessage } from "element-plus";
import { RefreshRight, ArrowRight } from "@element-plus/icons-vue";
import { setPayInfo } from "@/utils/api"
import { type ParamsInter} from "@/utils/interface"
import Table from "@/components/Table.vue";
import TableIncome from "@/components/TableIncome.vue";
import { useTableStore } from "@/stores/useTableStore";
const tableStore = useTableStore();
// 设置表格高度
import { adaptiveHeight } from "@/utils/func"
const tableHeight = ref(adaptiveHeight(640))

// 更新表格数据
const getTableList = () => {
  tableStore.pagination.currentPage = 1
  tableStore.pagination.pageSize = 5
  if(tableStore.detailType == 1){
    // 支出
    tableStore.form = {}
    tableStore.getTableList()
  }else{
    // 收入
    tableStore.formIncome = {}
    tableStore.getTableIncomeList()
  }
}
// 表格数据类型 1为支出 2为收入
const changeType = (id:number) => {
  tableStore.detailType = id;
  getTableList()
}

// 饼状图
import usePie from "@/hooks/usePie";
const { setChart, getPieData,nowPieUpdateTime, pieLoading } = usePie();

// 转账
import usePayment from "@/hooks/usePayment";
const { getPayInfoFunc,formData, payBoxLoading, changePayCard, codeCountDown, clearPayInfo, validateMoney,validateInfo } = usePayment();

// 提交信息
function submit() {
  // 验证信息
  if(!validateInfo()){
    return false;
  }
  formData.submitLoading = true;
  let params = <ParamsInter>{}
      params.shopId    = formData.selectVal as string           // 卡信息
      params.createBy  = ""                                     // 当前操作人
      params.authcode  = formData.authcode                      // 验证码
      params.txnamount = Number(formData.txnamount) * 100       // 金额
      params.remark    = formData.remark                        // 备注
  setPayInfo(params).then(res=>{
      if(res.data.code == 200){
          ElMessage({
              message : res.data.msg,
              type    : "success",
              duration: 2 * 1000
          });
          getTableList();   // 获取表格数据
          getPieData();     // 获取饼状图数据
          clearPayInfo(); // 清除倒计时
      }else{
          ElMessage({
              message : res.data.msg,
              type    : 'error',    
              duration: 1500        
          })
          payBoxLoading.value = false
      }
      formData.submitLoading = false;
      payBoxLoading.value = false
  }).catch(err=>{
      ElMessage({
          message : err,
          type    : 'error',    
          duration: 1500        
      })
      formData.submitLoading = false;
      payBoxLoading.value = false
  })
}
onMounted(() => {
    setChart(<HTMLElement>document.getElementById("mychart"));
    getPieData(); // 默认获取一次数据
    getPayInfoFunc()
    getTableList(); // 默认获取一次表格数据
});
</script>

<style>
.flex1 {
  flex:1;
}
#mychart {
  width: 600px;
  height: 250px;
}

.zhuanzhangbox {
  width: 30%;
  min-width: 250px;
  max-width: 350px;
  height: 320px;
  margin-right: 10%;
  position: relative;
}

.zhuanzhangbox::before {
  content: "";
  position: absolute;
  right: -20%;
  top: 50%;
  transform: translateY(-50%);
  height: 200px;
  width: 3px;
  border-radius: 100px;
  background-color: #ccc;
  opacity: 0.2;
  /* border-right:1px solid #ccc; */
}

.title {
  border-bottom: 1px solid #dedede;
}

.title span {
  display: inline-block;
  padding: 5px 15px;
  position: relative;
}

.title span.active::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: #0066b3;
}

.datashow {
  min-width: 450px;
}

.dialog-table {
  border-collapse: collapse;
  width: 100%;
}

.dialog-table td {
  border: 1px solid #eee;
  padding: 10px;
}

a {
  text-decoration: none;
}

.count-down {
  right: 10px;
  top: 17px;
  z-index: 2;
}
</style>
